<script>

import KtTableSaveOfTypeIsDatetime from "/src/components/node-kantboot/components/KtTable/InSaveComponents/KtTableSaveOfTypeIsDatetime.vue";
import KtTableSaveOfTypeIsImg
  from "/src/components/node-kantboot/components/KtTable/InSaveComponents/KtTableSaveOfTypeIsImg.vue";
import KtTableSaveOfTypeIsEnum
  from "/src/components/node-kantboot/components/KtTable/InSaveComponents/KtTableSaveOfTypeIsEnum.vue";
import KtTableSaveOfTypeIsText
  from "/src/components/node-kantboot/components/KtTable/InSaveComponents/KtTableSaveOfTypeIsText.vue";

export default {
  components: {KtTableSaveOfTypeIsText, KtTableSaveOfTypeIsEnum, KtTableSaveOfTypeIsImg, KtTableSaveOfTypeIsDatetime},
  props:{
    columns:{
      type: Array,
      default: []
    },
    requestUri: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      visible: false,
      form: {},
      layout: 'vertical'
    }
  },
  methods: {
    getHasSaveColumn(columns){
      let hasSaveColumn = [];
      for(let column of columns){
        if(column?.isId||!column?.isAdd){
          continue;
        }
        hasSaveColumn.push(column);
      }
      return hasSaveColumn;
    },
    formChange(column,value){
      console.log(column.field+":"+value);
      // 如果是对象的话，需要使用
      let split = column.field.split('.');
      if(split.length>0){
        for(let i=0;i<split.length-1;i++){
          eval(`this.form.${split[i]} = {}`);
        }
      }

      eval(`this.form.${column.field} = value`);
    },
    getSaveRequestUrl(){
      return this.requestUri+"/save";
    },
    handleOk() {
      // element-plus中的loading
      const loading = this.$loading({
        lock: true,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$kt.request.send({
        uri: this.getSaveRequestUrl(),
        method: 'POST',
        data: this.form,
        stateSuccess: (res) => {
          loading.close();
          this.$message.success(res.msg);
          this.close();
          this.$emit('saveSuccess', this.form);
        },
        stateFail: (res) => {
          loading.close();
          this.$message.error(res.errMsg);

        }
      });
    },
    handleCancel() {
      this.$emit('cancel')
    },
    open(){
      this.visible = true;
    },
    close() {
      this.visible = false;
    }
  }
}

</script>

<template>
  <div>
    <a-modal
        title="保存"
        v-model:visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-form :form="form" :layout="layout">
        <el-scrollbar style="height: calc(100vh - 300px);min-height: 300px;">

            <template
                v-for="column in getHasSaveColumn(columns)">
              <a-form-item
                  v-if="column.type!=='custom'&&!column.isId"
                  :label="column.label"
                  :name="column.field">

                <kt-table-save-of-type-is-text
                    v-if="column.type === 'text'"
                    :column="column"
                    @change="e => formChange(column,e)"
                ></kt-table-save-of-type-is-text>

                <el-input
                    clearable
                    v-if="column.type === 'textarea'"
                    @input="formChange(column,$event.target.value)"
                    type="textarea"
                    v-model:value="form.description"/>

                <el-input-number
                    clearable
                    v-if="column.type === 'number'"
                    v-model:value="form.description"/>

                <!-- 关于枚举 -->
                <kt-table-save-of-type-is-enum
                  v-if="column.type === 'enum'"
                  :column="column"
                  @change="e => formChange(column,e)">
                </kt-table-save-of-type-is-enum>

                <!-- 关于图片 -->
                <kt-table-save-of-type-is-img
                    v-if="column.type === 'img'"
                    :column="column"
                  @change="e => formChange(column,e)">
                </kt-table-save-of-type-is-img>

                <!-- 关于时间 -->
                <kt-table-save-of-type-is-datetime
                    v-if="column.type === 'datetime'"
                    :column="column"
                    @change="formChange(column,$event)"
                ></kt-table-save-of-type-is-datetime>

              </a-form-item>
            </template>



        </el-scrollbar>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>

</style>